<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todolist</title>
    <script src="./vue.js"></script>
    <style>
        .done li span {
            color: grey;
            text-decoration: line-through;
        }

        .todo li {
            width: 200px;
            height: 35px;
            position: relative;
        }
        .done li {
            width: 200px;
            height: 35px;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>实现待办事项功能</p>
        <!--第一部分，记录-->
        <input type="text" v-model="thing" placeholder="请输入待办事项">
        <button type="submit" @click=add()>确定</button>
        <!--第二部分，待办事项-->
        <p>待办事项</p>
        <ol class="todo">
            <!-- v-for 用于循环待办事项数组 其中item代表每条事项，index代表数组索引(0开始) -->
            <li v-for='(item,index) in todo'>
                <span>{{item}}</span>
                <button type="submit" @click=finish(index)>完成</button>
                <button type="submit" @click=deleteTodo(index)>删除</button>
            </li>
        </ol>
        <!--第三部分，已完成事项-->
        <p>已完成事项</p>
        <ol class="done">
            <li v-for='(item,index) in finished'>
                <span>{{item}}</span>
                <button type="submit" @click=changeTodo(index)>未完成</button>
                <button type="submit" @click=deleteFinished(index)>删除</button>
            </li>
        </ol>       
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                content: "hello vue",
                thing: '', //v-model绑定
                todo: [],
                finished: []
            },
            methods: {
                // 将input标签里的内容加入到todo(待办事项数组)
                add() {
                    this.todo.push(this.thing);
                    this.thing = '';
                },
                // 将待办事项里完成的加入到finished(完成事项数组)
                finish(index) {
                    this.finished.push(this.todo[index]);
                    // 数组.splice(index,howmany)方法 
                    // index代表此项目位置(即在数组中的索引) howmany代表从此位置开始删除多少个
                    this.todo.splice(index, 1);
                },
                // 将完成事项改成待办事项
                changeTodo(index) {
                    this.todo.push(this.finished[index]);
                    this.finished.splice(index, 1);
                },
                // 对待办事项删除
                deleteTodo(index) {
                    this.todo.splice(index, 1);
                },
                // 对完成事项删除
                deleteFinished(index) {
                    this.finished.splice(index, 1);
                }
            }
        });
    </script>
</body>

</html>